{% load i18n %}
{% extends "base.html" %}

{% block header %}

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#list").jqGrid({
	url: '/admin/ajaxlist?model=media',
	datatype: "json",
	mtype: 'GET',
	scrollrows: true,
	autowidth: true,
	rownumbers: true,
	gridview: true,
	height: 500,
	colNames: ['{% trans "File Name" %}', '{% trans "Upload User" %}', '{% trans "Size" %}', '{% trans "Upload Date" %}', '{% trans "Url" %}', 'Type', 'Public', '{% trans "Download" %}'],
	colModel: [{
	    name: 'name',
	    index: 'name',
	    width: 250,
	    resizable: true,
	    editable: true,
	    formatter:'showlink', formatoptions:{
				    baseLinkUrl:'/media/', addParam: '&action=download',target:'_blank'
						}
	},
	{
	    name: 'user',
	    index: 'user',
	    width: 150,
	    resizable: true
	},
	{
	    name: 'size',
	    index: 'size',
	    width: 130,
	    align: 'right',
	    resizable: true
	},
	{
	    name: 'date',
	    index: 'date',
	    width: 100,
	    align: 'right',
	    resizable: true,
	    editable: true,
	    editoptions: {
		size: 12,
		//dataInit:function(el){
		//					$(el).datepicker({dateFormat:'yy-mm-dd'});
		//				},
		defaultValue: function() {
		    var currentTime = new Date();
		    var month = parseInt(currentTime.getMonth() + 1);
		    month = month <= 9 ? "0" + month: month;
		    var day = currentTime.getDate();
		    day = day <= 9 ? "0" + day: day;
		    var year = currentTime.getFullYear();
		    return year + "-" + month + "-" + day;
		}
	    },
	    formoptions: {
		rowpos: 2,
		elmprefix: "(*)",
		elmsuffix: "  yyyy-mm-dd"
	    },
	    editrules: {
		required: true
	    }
	},
	{
	    name: 'url',
	    index: 'url',
	    width: 250,
	    align: 'right',
	    editable: true,
	    resizable: true,
	    edittype: 'link',
	    formatter: 'link'
	},
	{
	    name: 'mtype',
	    index: 'mtype',
	    width: 100,
	    align: 'right',
	    editable: false,
	    resizable: true
	},
	{
	    name: 'public',
	    index: 'public',
	    width: 100,
	    align: 'left',
	    editable: true,
	    edittype: "select",
	    editoptions: {
		value: "true:true;false:false"
	    }
	},
	{
	    name: 'viewcount',
	    index: 'viewcount',
	    width: 100,
	    resizable: true,
	    editable: true,
	    editrules: {
		edithidden: true,
		required: true,
		number: true,
		minValue: 0
	    }
	}],
	jsonReader: {
	    page: "page",
	    total: "total",
	    records: "records",
	    id: "id",
	    userdata: "userdata",
	    repeatitems: false,
	},
	pager: 'pager',
	multiselect: true,
	rowNum: 20,
	height: '100%',
	rowList: [10, 20, 30],
	sortname: 'id',
	sortorder: 'desc',
	viewrecords: true,
	sortable: true,
	editurl: "/admin/ajaxlist?action=save",
	caption: '{% trans "Manage Files"%}',
	toolbar: [true, "bottom"],
	loadComplete: function() {
	    var udata = $("#list").jqGrid('getUserData');
	    $("#t_list").css("text-align", "right").html("Totals Size:" + udata.tsize + " View Count: " + udata.tviewcount + " Total: " + udata.ttotal + "&nbsp;&nbsp;&nbsp;");
	},
	loadError: function(xhr, st, err) {
	    $("#t_list").css("text-align", "left").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText);
	},
	afterInsertRow: function(rowid, aData) {
	    switch (aData.name) {
	    case 'image/jpeg':
		jQuery("#list").jqGrid('setCell', rowid, 'mtype', '', {
		    color: 'green'
		});
		break;
	    case 'text/plain':
		jQuery("#list").jqGrid('setCell', rowid, 'mtype', '', {
		    color: 'red'
		});
		break;
	    case 'None':
		jQuery("#list").jqGrid('setCell', rowid, 'mtype', '', {
		    color: 'blue'
		});
		break;

	    }
	}
    });
    jQuery("#list").jqGrid('navGrid', '#pager', {
	view: true,
	edit: true,
	add: false,
	del: true
    },
    {
	height: 280,
	reloadAfterSubmit: false,
	processData: "Processing...",
	closeOnEscape: true,
	bottominfo: "Fields marked with (*) are required",
	afterSubmit: {
	    success: true
	}
    },
    // edit options
    {
	jqModal: true,
	checkOnUpdate: true,
	savekey: [true, 13],
	navkeys: [true, 38, 40],
	checkOnSubmit: true,
	reloadAfterSubmit: false,
	closeOnEscape: true,
	bottominfo: "Fields marked with (*) are required",
	closeAfterAdd: true
    },
    // add options
    {
	reloadAfterSubmit: false,
	jqModal: false,
	closeOnEscape: true
    },
    // del options
    {
	sopt: ['eq', 'ne', 'gt', 'ge', 'in', 'ni'],
	closeOnEscape: true,
	drag: true
    },
    // search options
    {
	navkeys: [true, 38, 40],
	jqModal: false,
	closeOnEscape: true
    } //view options

    ).jqGrid('navButtonAdd',"#pager",{
   caption:"{% trans "Upload a file" %}",
   buttonicon:"ui-icon-add",
   onClickButton: function(){
     $.colorbox({width:"600", height:"600", iframe:true,href:"/admin/upload",
			    onClosed:function(){
						jQuery("#list").jqGrid('setGridParam',
								    {sortname:"date",sortorder:"asc"}).trigger("reloadGrid");
						}
		});
   },
   position:"last"
   });

});
</script>

{% endblock %}

{% block content %}
<div class="wrap">
<h2>{% trans "Manage Files"%}</h2>
</div>
<br />

<!-- {{{ file list -->
<table id="list">
</table>
<div id="pager"> </div>
<div id="pager2"> </div>

{% endblock %}
